<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>数据库管理</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/mobile/need/layer.css" rel="stylesheet">
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-default" id="app">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">数据库管理</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="/conn/index">连接 <span class="sr-only">(current)</span></a></li>
            <li><a href="/dto/index">Dtos</a></li>
            <li class="active"><a href="/dataset/index">训练数据集</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">登录</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">系统菜单 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->

      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-3 left-menu">
            <div class="dataset-edit">
              <form class="form-horizontal">
                <div class="form-group">
                  <label for="systemContent" class="col-sm-12">角色（system）：</label>
                  <div class="col-sm-12">
                    <textarea class="form-control" v-model="model.systemContent" id="systemContent" placeholder="输入训练内容"></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <label for="userContent" class="col-sm-12">角色（user）：</label>
                  <div class="col-sm-12">
                    <textarea class="form-control" v-model="model.userContent" id="userContent" placeholder="输入训练内容"></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <label for="assistantContent" class="col-sm-12">角色（assistant）：</label>
                  <div class="col-sm-12">
                    <textarea class="form-control" v-model="model.assistantContent" id="assistantContent" placeholder="输入训练内容"></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <label for="orderNum" class="col-sm-4">排序：</label>
                  <div class="col-sm-8">
                    <input class="form-control" v-model="model.orderNum" id="orderNum" placeholder="输入训练内容"></input>
                  </div>
                </div>
              </form>
              <div style="padding: 20px 0px; display: flex; justify-content:space-evenly; box-sizing: border-box;">
                <button type="button" class="btn btn-default">关闭</button>
                <button type="button" class="btn btn-primary" @click="saveChanges(this)">保存</button>
              </div>
            </div>
          </div>
          <div class="col-sm-9 center-container">
            <div style="height: calc(100% - 50px);  width: 100%;">
              <div style="height: 100%; overflow-y: scroll; width: 100%;">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th style="width: 100px; text-align: center;">序号</th>
                      <th>系统</th>
                      <th>用户</th>
                      <th>助手</th>
                      <th style="width: 200px; text-align: center;">操作</th>
                    </tr>
                  </thead>
                  <tbody style="height: calc(100% - 145px); overflow-y: scroll;">
                    <tr v-for="(item,index) in list" :key="index">
                      <td>[[ item.orderNum ]]</td>
                      <td>[[ item.systemContent ]]</td>
                      <td>[[ item.userContent ]]</td>
                      <td>[[ item.assistantContent ]]</td>
                      <td style="text-align: center;">
                        <button type="button" class="btn btn-default btn-sm" @click="handleEdit(item,index)">编辑</button>
                        <button type="button" class="btn btn-default btn-sm" @click="handleRemove(item,index)">移除</button>
                      </td>
                    </tr>
                  </tbody>
                </table>

              </div>
              <div class="footer-options">
                <button type="button" class="btn btn-primary" @click="handleCreate">新增数据</button>
                <button type="button" class="btn btn-primary" @click="handleExport">导出数据</button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </nav>


    <script src="/static/js/bootstrap.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#app',
        delimiters: ["[[", "]]"],
        data() {
          return {
            list: [],
            model: {
              orderNum: 10,
              systemContent: '',
              userContent: '',
              assistantContent: ''
            },
            index: -1,
          }
        },
        created() {
          this.fetchData()
        },
        methods: {
          fetchData() {
            fetch('/dataset/list').then(async response => {
              let data = await response.json()
              this.list = data.data
              // console.log(data)
            })
          },
          saveChanges() {
            let model = { ...this.model }
            if (!model.systemContent) {
              layer.msg("系统训练内容不能为空")
              return
            }
            if (!model.userContent) {
              layer.msg("用户训练内容不能为空")
              return
            }

            if (!model.assistantContent) {
              layer.msg("助手训练内容不能为空")
              return
            }


            if (this.index == -1) {
              this.handleSave(model)
            } else {
              this.handleModify(model)
            }

          },
          handleCreate() {
            let orderNum = this.model.orderNum ?? 100
            this.model = {
              orderNum: ++orderNum,
              systemContent: '',
              userContent: '',
              assistantContent: ''
            }
            this.index = -1
          },
          handleEdit(item, index) {
            this.index = index
            this.model = { ...item }
          },
          handleSave(model) {

            fetch('/dataset/create', {
              headers: { "content-type": "application/json" },
              method: "POST",
              body: JSON.stringify(model)
            }).then(async response => {
              let data = await response.json()
              this.handleCreate()
              this.fetchData()
              layer.msg(data)
              // console.log(data)
            }).catch(err => {
              console.log(err)
            })
          },
          handleModify(model) {

            fetch('/dataset/modify', {
              headers: { "content-type": "application/json" },
              method: "POST",
              body: JSON.stringify(model)
            }).then(async response => {
              let data = await response.json()
              this.fetchData()
              console.log(data)
            }).catch(err => {
              console.log(err)
            })
          },
          handleRemove(item, index) {
            if (!confirm('确定移除该数据')) {
              return
            }
            fetch('/dataset/delete?id=' + item.id, {
              headers: { "content-type": "application/json" },
              method: "DELETE",
            }).then(async response => {
              let data = await response.json()
              this.fetchData()
              layer.msg(data)
              console.log(data)
            }).catch(err => {
              console.log(err)
            })
          },
          handleExport() {
            fetch('/dataset/export', {
              headers: { "content-type": "application/json" },
              method: "POST"
            }).then(async response => {
              let data = await response.json()
              layer.msg(data)
              console.log(data)
            }).catch(err => {
              console.log(err)
            })
          }
        }
      })
    </script>
  </body>
  <style>
    .row {
      height: calc(100vh - 75px);

    }

    tr .active td {
      cursor: pointer;
      background-color: #096;
    }

    .left-menu {
      height: 100%;
      background-color: #FFF;
      border: 1px solid #EEE;
      box-sizing: border-box;
      padding: 0px;
      overflow: hidden;
    }

    .center-container {
      box-sizing: border-box;
      height: 100%;
      overflow-y: scroll;
      background-color: #FFF;
      border: 1px solid #EEE;
      padding: 0px;
      overflow: hidden;
    }


    .dataset-edit {
      height: 100%;
      overflow: hidden;
    }


    .footer-options {
      position: relative;
      border-top: 1px solid #EEE;
      bottom: 0px;
      padding: 10px;
    }
  </style>
</html>